<template>
	<div class="bottom">
		<div class="common" style="margin-top: 0.2667rem">
			<p>持仓时间 <img src="../assets/introduce.png" @click="cTime"/></p>
			<a>T+D</a>
		</div>
		
		<div class="common" >
			<p>触发止损 <img src="../assets/introduce.png" @click="zSun"/></p>
			<a><span :class="{'act':flag==index}" v-for="(i,index) in data" @click='toActive(i,index)'>{{i.stopLoss}}</span></a>
		</div>
		<v-BuyBottom2 :for="data[flag]"></v-BuyBottom2>
	</div>
</template>

<script>
	import { MessageBox} from 'mint-ui'
	import BuyBottom2 from '@/components/BuyBottom2'
	export default {
		props:['item'],
		data(){
			return{
				data:"",
				flag:0,
				buyNum:{
					stopLossLine:"",
					stopProfitLine:"",
					paidFee:"",
					lossLimit:"",
					deposit:"",
					divideScale:""
				}
				
			}
		},
		
	    methods: {
	    	cTime(){
	    		MessageBox({
				  title: '',
				  message: '<p style="line-height: .5rem; padding:0.3rem; font-size:  0.32rem;">默认每天自动延递，延递费从账户余额扣除，若余额不足或者不符合延递条件，第2个工作日投资人可卖出清算。</p>',
				  showConfirmButton:true,
				  confirmButtonText:"知道了"
				  
				});
	    	},
	    	zSun(){
	    		MessageBox({
				  title: '',
				  message: '<p style="line-height: .5rem; padding:0.3rem; font-size:  0.32rem;">当合作交易品种的浮动盈亏达到特定数值时，由投资人即使卖出交易品种全部持有数量进行止损。</p>',
				  showConfirmButton:true,
				  confirmButtonText:"知道了"
				  
				});
	    	},
	    	toActive(i,index) {
	    		this.flag = index;
	    		this.buyNum.stopLossLine=i.stopLoss;
	    		this.buyNum.stopProfitLine=i.stopProfitLine;   
	    		this.buyNum.paidFee=i.fee;
	    		this.buyNum.lossLimit=i.diyanCondition;
	    		this.buyNum.deposit=i.agreementScale;
	    		this.buyNum.divideScale=i.dividend;
	    		this.$emit('ievent',this.buyNum,'in');
	    	}
	       
	    },
	    components:{
			"v-BuyBottom2":BuyBottom2
		},
	    watch: {
            item(value) {
                this.data = value;
                this.buyNum.stopLossLine= this.data[0].stopLoss;
	    		this.buyNum.stopProfitLine=this.data[0].stopProfitLine;   
	    		this.buyNum.paidFee=this.data[0].fee;
	    		this.buyNum.lossLimit=this.data[0].diyanCondition;
	    		this.buyNum.deposit=this.data[0].agreementScale;
	    		this.buyNum.divideScale=this.data[0].dividend;
	    		this.$emit('ievent',this.buyNum,'in');
            }
       }
       
	    
	}
</script>

<style lang="less" scoped>
@import '../less/config.less';
.bottom{
	background:#141723;
	color: white;
	.common{
		border-bottom:1px solid #262934;
		padding: 0 @p30;
		height:1.306rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		p{
			font-size: @f32;
			img{
				vertical-align:middle;
				width: 0.48rem;
				height: 0.48rem;
			}
			
		}
		a{
			text-decoration: none;
			font-size: @p30;
			color: #FFFC25;
			span{
				margin-right: .1rem;
				font-size: @f32;
				color: #56627C;
				border: 1px solid #56627C;
				padding: 5px;
			}
			.act{
				border: 1px solid #FFFC25;
				color: #FFFC25;
			}
			
		}
		
	}
}


</style>